<template>
  <div class="person">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="add">点我加1</button>
  </div>
  
</template>



<script lang="ts" setup name="Person">
/**
 * 1、人的生命周期：
 * 【时刻】      【要做的事】
 *  出生         哭、
 * 经历          哭、笑
 * 死亡          遗嘱
 * 
 * 组件的生命周期：
 * 【时刻】      【调用特定的函数】
 * 创建          created()
 * 挂载          mounted()
 * 更新          updated()
 * 销毁          destroyed()
 * 
 * 生命周期、生命周期函数、生命周期钩子
 */

 /**
  * ### vu2 生命周期

  8个生命周期函数：
  
  创建(创建前beforeCreate，创建完毕created)
  挂载(挂载前，挂载完毕)
  更新(更新前，更新完毕)
  销毁（销毁前，销毁完毕）// vue2称为销毁

  * 
  */

  /**
   * ### vu3 生命周期
   * 生命周期钩子
   * 
   * 生命周期函数：（之后还有路由等钩子）
   * 创建阶段：setup
   * 挂载阶段：onBforeMount、onMounted
   * 更新阶段：onBeforeUpdate、onUpdated
   * 卸载阶段：onBeforeUnmount、onUnmounted // vue3称为卸载
   * 
   * 常用的钩子：onMounted（挂载完毕）、onUpdated（更新完毕）、onBeforeUnmount（卸载之前） 类比于人一生中的大日子
   * 
   */

  import {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'

  let sum = ref(0)

  function add() {
    sum.value += 1
  }

  // 创建
  console.log('创建')

  // 挂载前
  onBeforeMount(() => {
    console.log('挂载前')
  })
  // 挂载完毕
  onMounted(() => {
    console.log('子----挂载完毕')
  })
  // 更新前
  onBeforeUpdate(() => {
    console.log('更新前')
  })
  // 更新完毕
  onUpdated(() => {
    console.log('更新完毕')
  })
  // 卸载前
  onBeforeUnmount(() => {
    console.log('卸载前')
  })
  // 卸载完毕
  onUnmounted(() => {
    console.log('卸载完毕')
  })
  

</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px
}

button {
  margin: 0 5px;
}
li {
  font-size: 20px;
}
</style>